SF Symbol Design - Variable Draw 動態繪製（指南）

Symbol Design and Construction 符號設計與構建基礎

每個圖示都非常講究，設計得讓人一眼就看懂它想表達什麼。這些概念接著被轉化為設計，從一個向量點開始，逐步繪製出連續的路徑，圖形由此成形。 每一個向量點與曲線都經過有意識的引導，最終決定了圖形的特徵與輪廓。每一個曲線與角度都必須顯得經過深思熟慮、具有平衡感，並且能夠傳達視覺上的資訊。

以箭頭為例來講解。一個符號不僅僅是帶有輪廓的路徑，因為這樣無法表現出使圖示出色的細節之處。實際上，符號是由精心描繪的形狀構成，這種方式可以精確控制比例、負空間與視覺權重。這樣的設計方式可以確保圖示在視覺上更清晰、一致，同時呈現出更精緻、具目的性的外觀。

Variable Draw 動態繪製

就像寫字一樣，圖示會沿著路徑慢慢畫出來！它有兩個動畫效果：一個是把圖示畫出來，另一個是把圖示擦掉，看起來超有趣！這些動畫預設利用了符號的圖層結構，能夠被整合進你的應用體驗中，用動畫來強調關鍵時刻。

“Draw” 提供了兩個新的動畫預設：Draw On（繪製出現）和 Draw Off（繪製消失）。（Draw On 表示圖示被逐步“畫出”，而 Draw Off 表示圖示以反向“被擦除”的方式退出）

Draw On 和 Draw Off 支援現有的播放模式：

By Layer（按圖層播放）其中每條路徑會以錯開的起點依次繪製。

Whole Symbol（整體符號）該模式會將所有圖層同時繪製，路徑的開始與結束同步發生。

Individually（逐個播放）它會一個圖層一個圖層地繪製，每次等上一個圖層完成後再開始下一個。

Draw 動畫非常靈活，每個圖示都可以自己決定怎麼畫出來：

• “風”的圖示從左向右繪製，以表現風的流動感；

• 而一個阿拉伯字母則從右向左繪製，以符合其語言的書寫方向。

• 有些圖示是對稱的，它們可以從中心開始向兩邊繪製。

• 箭頭圖示由兩部分構成，Draw支援這種組合圖形，讓箭頭頭部跟隨路徑移動，形成一個整體的動畫效果。

這種動態表現可以進一步強化符號的含義，讓你的 App 更具生命力與表達力。

Draw 動畫在 SF Symbols App 中的實際使用與預覽

我們先選擇 Draw On，它將顯示我們前面提到的三種播放方式。（包括 By Layer、Whole Symbol 和 Individually）Draw Off 的設定也差不多，不過它多了一個“反向開關”。這個開關決定了路徑是在當前繪製方向上繼續延伸消失，還是從終點反向“擦除”。Draw 動畫不僅能讓符號“動”起來，賦予它們生命感

同時可用於顯示進度資訊。變數繪製（Variable Draw）透過圖層繪製註解工作，根據設定的百分比在降低不透明度的圖層上繪製路徑，適用於展示下載進度、溫度變化或課程完成度等。

選擇了“繪製”選項後，參與繪製的圖層就開始響應變數渲染，就像之前使用變數顏色那樣。需要注意的是，符號可以同時支援變數顏色和變數繪製，但在渲染時只能選擇其中一個模式。在這種情況下，你也可以選擇使用預設選項，讓系統自動決定採用哪種變數渲染方式。